<template>
  <div>
    <Modal
      v-model="modal.add"
      title="添加"
      :mask-closable="false"
      @on-visible-change="changeModalVisibleResetForm('addForm', $event)"
      width="1020"
    >
      <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
            <FormItem label="属性名称" prop="attrName">
              <Input v-model="form.attrName" placeholder="请输入属性名称" />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="属性代码" prop="attrCode">
              <Input v-model="form.attrCode" placeholder="请输入属性代码" />
            </FormItem>
          </i-col>
        
          <i-col span="12">
            <FormItem label="数据类型" prop="attrType">
              <Select v-model="form.attrType" placeholder="请选择数据类型" filterable>
                <Option
                  v-for="(option, index) in dataTypeSelect"
                  :value="option.value"
                  :key="index"
                >{{option.label}}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="数据长度" prop="attrLength">
              <InputNumber v-model="form.attrLength" placeholder="请输入数据长度" style="width: 100%;" />
            </FormItem>
          </i-col>
        
          <i-col span="12">
            <FormItem label="是否必填" prop="attrRequired">
              <Select v-model="form.attrRequired" placeholder="请选择是否必填" filterable>
				<Option
					v-for="(option, index) in attrRequiredSelect"
					:value="option.value"
					:key="index"
				  >{{option.displayValue}}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="是否前端显示" prop="attrDisplay">
              <Select v-model="form.attrDisplay" placeholder="请选择是否前端显示" filterable>
                <Option
                  v-for="(option, index) in attrDisplaySelect"
                  :value="option.value"
                  :key="index"
                >{{option.displayValue}}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
        <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
      </div>
    </Modal>
    <Modal
      v-model="modal.edit"
      title="修改"
      :mask-closable="false"
      @on-visible-change="changeModalVisibleResetForm('editForm', $event)"
      width="1020"
    >
      <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
        <Row>
          <i-col span="12">
            <FormItem label="属性名称" prop="attrName">
              <Input v-model="form.attrName" placeholder="请输入属性名称" />
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="属性代码" prop="attrCode">
              <Input v-model="form.attrCode" placeholder="请输入属性代码" :readonly="attrCodeDisabled" />
            </FormItem>
          </i-col>
        
          <i-col span="12">
            <FormItem label="数据类型" prop="attrType">
              <Select v-model="form.attrType" placeholder="请选择数据类型" filterable>
                <Option
                  v-for="(option, index) in dataTypeSelect"
                  :value="option.value"
                  :key="index"
                >{{option.label}}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="数据长度" prop="attrLength">
              <InputNumber v-model="form.attrLength" placeholder="请输入数据长度" style="width: 100%;" />
            </FormItem>
          </i-col>
        
          <i-col span="12">
			<FormItem label="是否必填" prop="attrRequired">
			  <Select v-model="form.attrRequired" placeholder="请选择是否必填" filterable>
				<Option
					v-for="(option, index) in attrRequiredSelect"
					:value="option.value"
					:key="index"
				  >{{option.displayValue}}</Option>
			  </Select>
			</FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="是否前端显示" prop="attrDisplay">
              <Select v-model="form.attrDisplay" placeholder="请选择是否前端显示" filterable>
                <Option
                  v-for="(option, index) in attrDisplaySelect"
                  :value="option.value"
                  :key="index"
                >{{option.displayValue}}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
        <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { isDefaultSelect, dataTypeSelect } from '@/api/select'
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
export default {
  name: 'GoodsAttributeAddEdit',
  data() {
    return {
      modal: {
        add: false,
        edit: false
      },
      loading: {
        add: false,
        edit: false
      },
	  dataDictCodes: ['GOODS_ATTRIBUTE_REQUIRED','GOODS_ATTRIBUTE_DISPLAY'],
	  dataDictItems: {},
	  attrRequiredSelect:[],
	  attrDisplaySelect:[],
      urls: {
        addUrl: '/goods-attribute/admin/save',
        batchAddUrl: '/goods-attribute/admin/batch-save',
        editUrl: '/goods-attribute/admin/update',
        batchEditUrl: '/goods-attribute/admin/batch-update'
      },
      attrCodeDisabled: false,
      form: {
        id: null,
        attrName: null,
        attrCode: null,
        attrType: 'String',
        attrLength: null,
        attrRequired: 0,
        attrDisplay: 0,
        version: null,
        createTime: null,
        updateTime: null,
        isActive: null
      },
      validateRules: {
        attrName: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 1,
            max: 20,
            message: '必须1-20个字符',
            trigger: 'blur'
          }
        ],
        attrCode: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur'
          }
        ],
        attrType: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 1,
            max: 20,
            message: '必须1-20个字符',
            trigger: 'blur'
          }
        ],
        attrLength: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        attrRequired: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ],
        attrDisplay: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur, change'
          }
        ]
      },
      isDefaultSelect: isDefaultSelect,
      dataTypeSelect: dataTypeSelect
    }
  },
  computed: {},
  mounted() {
	              utils.getDataDict(this.dataDictCodes).then(response => {
	                if (response) {
	                  this.dataDictItems = response
					  
					  utils.getSelectDictItems(this, 'GOODS_ATTRIBUTE_DISPLAY', 'attrDisplay', 'attrDisplaySelect')
	                  utils.getSelectDictItems(this, 'GOODS_ATTRIBUTE_REQUIRED', 'attrRequired', 'attrRequiredSelect')
	                }
	              }).catch(error => {
	                console.log(error)
	              })
  },
  methods: {
    changeModalVisibleResetForm(formRef, visible) {
      if (!visible) {
        this.$refs[formRef].resetFields()
        this.form.id=null
      }
    },
    resetFormCancelModal(formRef, modal) {
      this.modal[modal] = false
      this.$refs[formRef].resetFields()
      this.form.id=null
    },
    add() {
      this.$emit('add')
    },
    edit() {
      this.$emit('edit')
    }
  }
}
</script>

<style>
</style>
